<template>
	<view>
		<view class="block">
			<view class="content">
				<view class="orderinfo">
					<view class="row">
						<view class="nominal">订单名称:</view>
						<view class="text">{{ orderName }}</view>
					</view>
					<view class="row">
						<view class="nominal">订单金额:</view>
						<view class="text">{{ amount }}元</view>
					</view>
				</view>
			</view>
		</view>
		<view class="block">
			<view class="title">选择支付方式</view>
			<view class="content">
				<view class="pay-list">
					<view class="row" @tap="paytype = 'wxpay'">
						<view class="left"><image src="http://120.55.49.138/ShopMall/static/img/wxpay.png"></image></view>
						<view class="center">微信支付</view>
						<view class="right"><radio :checked="paytype == 'wxpay'" color="#f06c7a" /></view>
					</view>
				</view>
			</view>
		</view>
		<view class="pay">
			<view class="btn" @tap="doDeposit">立即支付</view>
			<view class="tis">
				点击立即支付，即代表您同意
				<view class="terms">《条款协议》</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			orderid:'',
			amount:0,
			orderName:'',
			paytype:'alipay',//支付类型
			//session
			sessionid:'',
			hearder:'',
		};
	},
	onLoad(e) {
		this.amount = parseFloat(e.amount).toFixed(2);
		this.orderName = e.name;
		this.orderid = e.orderid;
		uni.getStorage({
			key:'paymentOrder',
			success: (e) => {
				if(e.data.length>1){
					this.orderName = '多商品合并支付'
				}else{

				}
				uni.removeStorage({
					key:'paymentOrder'
				})
			}
		});
	},
	methods:{
		doDeposit(){
			this.sessionid = uni.getStorageSync("sessionid");
			this.hearder = uni.getStorageSync("hearder");
		    console.log(this.hearder+this.sessionid);
			if (this.sessionid == null||this.sessionid == ''){
				uni.showToast({title: "请先登录！"});
				return;
			}
			var header = this.hearder;
			var sessionid = this.sessionid;
			var data={};
			this.$Request.post(this.$api.order.repay+this.orderid,data,header+sessionid).then(res => {

				if (res.code == 200) {
					let obj = {
						appId: res.data.WX.appId,
						nonceStr: res.data.WX.nonceStr,
						package: res.data.WX.package, // 固定值，以微信支付文档为主
						partnerid: res.data.WX.partnerid,
						prepayid: res.data.WX.prepayid,
						timeStamp: res.data.WX.timeStamp,
						sign: res.data.WX.sign, // 根据签名算法生成签名
					}
					// 第一种写法，传对象
					let orderInfo = obj;
					// 第二种写法，传对象字符串
					//let orderInfo = JSON.stringify(obj);
					console.log(orderInfo);
					uni.requestPayment({
					   timeStamp:orderInfo.timeStamp,
					   nonceStr: orderInfo.nonceStr,
					   package: orderInfo.package,
					   signType: 'MD5',
					   paySign: orderInfo.sign,
					   //total_fee: 10,
						success: function (res) {
							console.log('success:' + JSON.stringify(res));
						},
						fail: function (err) {
							console.log('fail:' + JSON.stringify(err));
						},
						complete: function (res) {
							console.log('支付完成'+JSON.stringify(res));
							var url = '/pay/success/success';
							console.log('get url', url)
							if (res.errMsg == 'requestPayment:ok') {
								wx.showModal({
									title: '提示',
									content: '付款成功'
								});
								if (url) {
									setTimeout(function () {
										wx.redirectTo({
											url: '/pages' + url
										});
									}, 2000)
								} else {
									setTimeout(() => {
										wx.navigateBack()
									}, 2000)
								}
							}
							return;
						}
					})
				}else{
				}
			})
		}
	}
}
</script>

<style lang="scss">
.block {
	width: 94%;
	padding: 0 3% 40upx 3%;
	.title {
		width: 100%;
		font-size: 34upx;
	}
	.content {
		.orderinfo {
			width: 100%;
			border-bottom: solid 1upx #eee;
			.row {
				width: 100%;
				height: 90upx;
				display: flex;
				align-items: center;
				.nominal {
					flex-shrink: 0;
					font-size: 32upx;
					color: #7d7d7d;
				}
				.text {
					width: 70%;
					margin-left: 10upx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 32upx;
				}
			}
		}
		.pay-list {
			width: 100%;
			border-bottom: solid 1upx #eee;
			.row {
				width: 100%;
				height: 120upx;
				display: flex;
				align-items: center;
				.left {
					width: 100upx;
					flex-shrink: 0;
					display: flex;
					align-items: center;
					image {
						width: 80upx;
						height: 80upx;
					}
				}
				.center {
					width: 100%;
					font-size: 30upx;
				}
				.right {
					width: 100upx;
					flex-shrink: 0;
					display: flex;
					justify-content: flex-end;
				}
			}
		}
	}
}
.pay {
	margin-top: 20upx;
	width: 100%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	.btn {
		width: 70%;
		height: 80upx;
		border-radius: 80upx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		background-color: #f06c7a;
		box-shadow: 0upx 5upx 10upx rgba(0, 0, 0, 0.2);
	}
	.tis {
		margin-top: 10upx;
		width: 100%;
		font-size: 24upx;
		display: flex;
		justify-content: center;
		align-items: baseline;
		color: #999;
		.terms {
			color: #5a9ef7;
		}
	}
}
</style>
